---
layout: default
title: Home
---
<main role="main">
  <div class="container">

    <ol>
     <li><a href="/">Home</a></li>
     <li><a href="#">Parent Category</a></li>
     <li>Current Category</li>
    </ol>

    <h1>Product Category Name</h1>

    <div class="row">
      <div class="grid-options col-sm-3">

        <h2>Narrow your selection</h2>

        <a class="choose-clearance" href="#">
          <h3>Clearance Sale</h3>
          <p>View clearance items</p>
        </a>

        <h3>Categories</h3>
        <ul class="options-list options-categories">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

        <h3>Brands</h3>
        <ul class="options-list options-brands">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

        <h3>Another Filter</h3>
        <ul class="options-list options-other">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

      </div><!-- /.products-grid-options -->
      <div class="products-grid col-sm-9">
        <div class="row">
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Exceptional Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-md-4">
            <a href="#"><img src="holder.js/300x200&auto=yes" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-secondary btn-sm pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div><!-- /.row -->

        <nav>
          <ul>
            <li>&laquo;</a>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>&raquo;</a>
            </li>
          </ul>
        </nav>
            
      </div><!-- /.products-grid -->
    </div><!-- /.row -->
  </div><!-- /.container -->
</main>
